import phaser from 'phaser';
import NetClient from '../types/NetClient';

/** 游戏大厅 */
export default class Hall extends phaser.Scene {

    private hallRomList: Element = null!;
    private clientNt: NetClient = null!;

    private roomList: any[] = [];
    private getRoomListTimeHandle: any = null!;

    constructor() {
        super('Hall');
    }

    addRomUI(roomInfo: any) {
        let node = document.createElement('div');
        node.setAttribute('roomId', roomInfo.id);
        node.innerHTML = `<div class="romItem"
                            style="width: 130px; height: 60px; background-color: rgb(245, 118, 64); box-sizing: border-box; padding: 5px; margin: 5px; margin-bottom: 10px; border-radius: 2px;">\n
                            <div class="romTitle" style="font-size: 10px; height: 20px; color: #fff;">`+ roomInfo.id + ' ' + roomInfo.titleName + `</div>
                            <div class="romType" style="font-size: 12px; height: 20px; color: #e84545; font-weight: 800;">PK测试</div>
                            <div class="romPlayerNum" style="font-size: 10px; height: 20px; text-align: right; color: #c3c3c3;">人数 `+ roomInfo.playerList.length + '/' + roomInfo.maxPlayerNumber + `</div>
                        </div>`;
        node.addEventListener('click', () => {
            let roomIdstr = node.getAttribute('roomId');
            if (roomIdstr != null) {
                let roomId: number = parseInt(roomIdstr);
                // console.log('加入房间:' + roomId);
                this.joinRoom(roomId);
            }
        });
        this.hallRomList.appendChild(node);
    }

    send(action: string, data: any = null) {
        this.clientNt.sendAction('Moba2D', action, data);
    }

    /** 获取房间列表,并更新UI */
    getRoomList() {
        if (this.clientNt.stateConnect == true) {
            this.send('getRoomList');
        }
    }

    /** 加入房间 */
    joinRoom(roomId: number) {
        console.log('加入房间:' + roomId);
        this.send('joinRoom', { roomId: roomId });
    }

    /** 创建房间 */
    createRoom() {
        if (this.clientNt.stateConnect == true) {
            this.send('create_room_1v1pk');
        } else {
            console.log('无网络创建房间');
        }
    }

    clear() {
        if(this.getRoomListTimeHandle){
            clearInterval(this.getRoomListTimeHandle);
            this.getRoomListTimeHandle = null!;
        }
    }

    hallInit() {
        this.clientNt = window.client;
        if (this.clientNt.stateConnect == true) {
            this.clientNt.currentObject = this;
        }


        this.send('enterGame')
    }


    onNetworkRecv(status: boolean, action: string = '', data: any = null) {
        if (status == false) {
            console.log('网络异常');
            return;
        }
        console.log('recv', action, data);

        if (action == 'enterGame') {
            console.log('enterGame success')
            // console.log(data)
            // console.log(window.userInfo)
            window.userInfo['playerInfo'] = data;

            this.getRoomList();
            this.getRoomListTimeHandle = setInterval(() => {
                this.getRoomList();
            }, 2000);

        }

        if (action == 'getRoomList') {
            console.log(data)
            this.roomList = data;
            this.hallRomList.innerHTML = '';
            for (let i = 0; i < this.roomList.length; i++) {
                this.addRomUI(this.roomList[i]);
            }
        }

        if (action == "create_room_1v1pk") {
            // console.log('create_room_1v1pk success')
            // console.log(data);
            this.clear();
            this.scene.start('Room', data);
        }
        if (action == "joinRoom") {
            this.clear();
            this.scene.start('Room', data);
        }


    }


    create() {

        let gameWidth = <number>this.sys.game.config.width;
        let gameHeight = <number>this.sys.game.config.height;

        let bg = this.add.image(gameWidth / 2, gameHeight / 2, 'background');
        bg.scaleX = bg.scaleY = 0.5;
        bg.setSize(gameWidth, gameHeight);


        let body: Element = this.add.dom(gameWidth / 2, gameHeight / 2, 'div', `width:` + gameWidth + `px; height:` + gameHeight + `px; background:rgba(0,0,0,0);`).node;

        body.innerHTML = `
        <div id="roomlist" style="background-color: rgba(0,0, 0,0.5);
            border-radius: 5px; width: 300px; height: 300px; display: flex; box-sizing:border-box; padding: 10px;
            flex-wrap: wrap; flex-direction: row; align-content: flex-start; justify-content: flex-start;
            align-items: center; overflow-y:hidden; overflow-x: hidden;">

        </div>

        <div id="buttonAddRoom" class="GameUIButton">创建房间</div>
        
        `
        body.querySelector('#buttonAddRoom')?.addEventListener('click', () => {
            this.createRoom();
        });

        this.hallRomList = <Element>body.querySelector('#roomlist');

        this.hallInit();
    }
}
